﻿<!--@Knockout-->
<div style="text-align:center; height:410px; max-width:630px; margin: 0 auto">
    <div style="height:380px" data-bind="dxDataGrid: {
        dataSource: books,
        columns: [
            'author', 'title', 'year', 'genre', 'format',
            { dataField: 'price', visible: false },
            { dataField: 'language', visible: false },
            { dataField: 'length', visible: false }
        ],
        paging: { pageSize: 7 },
        columnChooser: { enabled: checkBoxState }
    }"></div>
    <div data-bind="dxCheckBox: {
        text: 'Enable Column Chooser',
        value: checkBoxState
    }"></div>
</div>
<!--/@Knockout-->
<!--@AngularJS-->
<div ng-controller="demoController" style="text-align:center; height:410px; max-width:630px; margin: 0 auto">
    <div style="height:380px" dx-data-grid="{
        dataSource: books,
        columns: [
            'author', 'title', 'year', 'genre', 'format',
            { dataField: 'price', visible: false },
            { dataField: 'language', visible: false },
            { dataField: 'length', visible: false }
        ],
        paging: { pageSize: 7 },
        bindingOptions: {  
            'columnChooser.enabled': 'checkBoxState'
        }
    }"></div>
    <div ng-model="checkBoxState" dx-check-box="{
        text: 'Enable Column Chooser'
    }"></div>
</div>
<!--/@AngularJS-->
<!--@jQuery-->
<div style="text-align:center; height:410px; max-width:630px; margin: 0 auto">
    <div id="gridContainer" style="height:380px;"></div>
    <div id="enableColumnChooserCheckbox"></div>
</div>
<!--/@jQuery-->